<!DOCTYPE html>
<html lang="en" class="no-js">

<head>
    <link rel="icon" href="logo.jpg" type="image/x-icon" />
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>LI ZONGYANG</title>
    <meta name="description" content="Inspiration for Article Intro Effects" />
    <meta name="keywords" content="title, header, effect, scroll, inspiration, medium, web design" />
    <meta name="author" content="李宗洋" />
    <link rel="stylesheet" type="text/css" href="CCC.css" />
    <link rel="stylesheet" type="text/css" href="BBB.css" />
    <link rel="stylesheet" type="text/css" href="DDD.css" />
    <link rel="stylesheet" href="styled.css">


    <link rel="stylesheet" type="text/css" href="AAA.css" />

</head>

<body class="demo-6">
    <div id="container" class="container intro-effect-grid">

        <header class="header">
            <ul class="grid">
                <li>
                    <h2>Fruits</h2>
                </li>
                <li>
                    <h2>Pineapple</h2>
                </li>
                <li>
                    <h2>Sea cucumber</h2>
                </li>
                <li>
                    <h2>Pitaya </h2>
                </li>
                <li>
                    <h2></h2>
                </li>
                <li>
                    <h2>Egg</h2>
                </li>
            </ul>

            <div class="bg-img"><img src="a8.jpg" alt="Background Image" />

            </div>
            <div class="title">

                <h1>作品简介</h1>
                <p class="subline">海报</p>
                <p class="subline">与</p>
                <p class="subline">版式设计的一些作品</p>




            </div>

        </header>
        <div class="zpa">
            <div class="zpb"></div>
            <div class="zpc"></div>
            <div class="zpd"></div>
            <div class="zpe"></div>
            <div class="zpf"></div>
            <div class="zpg"></div>
            <div class="zph"></div>
            <div class="zpi"></div>
            <div class="zpj"></div>
        </div>


        <div>

        </div>
        </article>

    </div>

    <script src="classie.js"></script>
    <script>
        (function() {


            var ie = (function() {
                var undef, rv = -1;
                var ua = window.navigator.userAgent;
                var msie = ua.indexOf('MSIE ');
                var trident = ua.indexOf('Trident/');

                if (msie > 0) {

                    rv = parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
                } else if (trident > 0) {

                    var rvNum = ua.indexOf('rv:');
                    rv = parseInt(ua.substring(rvNum + 3, ua.indexOf('.', rvNum)), 10);
                }

                return ((rv > -1) ? rv : undef);
            }());



            var keys = [32, 37, 38, 39, 40],
                wheelIter = 0;

            function preventDefault(e) {
                e = e || window.event;
                if (e.preventDefault)
                    e.preventDefault();
                e.returnValue = false;
            }

            function keydown(e) {
                for (var i = keys.length; i--;) {
                    if (e.keyCode === keys[i]) {
                        preventDefault(e);
                        return;
                    }
                }
            }

            function touchmove(e) {
                preventDefault(e);
            }

            function wheel(e) {

            }

            function disable_scroll() {
                window.onmousewheel = document.onmousewheel = wheel;
                document.onkeydown = keydown;
                document.body.ontouchmove = touchmove;
            }

            function enable_scroll() {
                window.onmousewheel = document.onmousewheel = document.onkeydown = document.body.ontouchmove = null;
            }

            var docElem = window.document.documentElement,
                scrollVal,
                isRevealed,
                noscroll,
                isAnimating,
                container = document.getElementById('container'),
                trigger = container.querySelector('button.trigger');

            function scrollY() {
                return window.pageYOffset || docElem.scrollTop;
            }

            function scrollPage() {
                scrollVal = scrollY();

                if (noscroll && !ie) {
                    if (scrollVal < 0) return false;

                    window.scrollTo(0, 0);
                }

                if (classie.has(container, 'notrans')) {
                    classie.remove(container, 'notrans');
                    return false;
                }

                if (isAnimating) {
                    return false;
                }

                if (scrollVal <= 0 && isRevealed) {
                    toggle(0);
                } else if (scrollVal > 0 && !isRevealed) {
                    toggle(1);
                }
            }

            function toggle(reveal) {
                isAnimating = true;

                if (reveal) {
                    classie.add(container, 'modify');
                } else {
                    noscroll = true;
                    disable_scroll();
                    classie.remove(container, 'modify');
                }


                setTimeout(function() {
                    isRevealed = !isRevealed;
                    isAnimating = false;
                    if (reveal) {
                        noscroll = false;
                        enable_scroll();
                    }
                }, 1000);
            }


            var pageScroll = scrollY();
            noscroll = pageScroll === 0;

            disable_scroll();

            if (pageScroll) {
                isRevealed = true;
                classie.add(container, 'notrans');
                classie.add(container, 'modify');
            }

            window.addEventListener('scroll', scrollPage);
            trigger.addEventListener('click', function() {
                toggle('reveal');
            });
        })();
    </script>
</body>

</html>